<template>
  <div class="goodlist-wrap">
    <Search ref="Search"></Search>
    <div class="banner flex">
      <img src="../../../static/img/index/title-left.png">
      <h3 class="banner-title">{{$t('领券中心')}}</h3>
      <img src="../../../static/img/index/title-right.png">
    </div>
    <div class="container">

      <!-- 商品展示容器 -->
      <div class="coupon-wrap">
        <ul class="coupon-box" v-if="couponList.total">
          <li v-for="(item, index) in couponList.data" :key="index" :class="item.have==0 ? 'coupon-box-item flex' : 'coupon-box-item-check flex'" @click="goDetail(item)">
            <div class="goods-thumb">
              <img :src="item.thumb_url" />
            </div>
            <div class="coupon-info">
              <div class="coupon-info-top">
                <div class="coupon-info-left">
                  <span :title="item.dec_price">{{ $t('￥') }}{{item.dec_price}}</span>
                </div>
                <div class="coupon-info-right">
                  <p class="coupon-info-title" :title="item.shop_name">{{item.shop_name }}</p>
                  <p>
                    <span>{{ $t('满') }}</span>
                    <span class="coupon-dec-price">{{ $t('￥') }}{{item.man_price}}</span>
                    <span>{{ $t('减') }}</span>
                    <span  class="coupon-dec-price">{{ $t('￥') }}{{item.dec_price}}</span>
                  </p>
                </div>
              </div>
              <div class="coupon-info-bottom">
                <span>{{ item.start_time }} - {{ item.end_time }}</span>
              </div>
            </div>
            <div class="coupon-btn">
              <span v-if="item.have == 1">{{ $t('已领取') }}</span>
              <span v-else>{{ $t('立即领取') }}</span>
            </div>
          </li>
        </ul>
        <Empty v-else />
        <div class="coupon-page" v-if="couponList.total">
          <Page :total="couponList.total" :page-size="10" @on-change="pageChange"></Page>
        </div>
      </div>
    </div>
    <Spin size="large" fix v-if="isLoading"></Spin>
  </div>
</template>

<script>
  import Search from "@/components/Search";
  import {
    Empty
  } from "@/components";
  import GoodsListNav from "@/components/nav/GoodsListNav";
  import GoodsClassNav from "@/components/nav/GoodsClassNav";
  import store from "@/vuex/store";
  import {
    mapState,
    mapActions,
    mapGetters,
    mapMutations
  } from "vuex";
  import {
    goGoodsDeatil
  } from "@/common/utils";

  export default {
    name: "CouponList",
    beforeRouteEnter(to, from, next) {
      window.scrollTo(0, 0);
      next();
    },
    data() {
      return {
        searchItem: "",
        isAction: [true, false, false],
        icon: ["arrow-up-a", "arrow-down-a", "arrow-down-a"],
        goodsTool: [{
            title: "综合",
            en: "sale"
          },
          {
            title: "评论数",
            en: "remarks"
          },
          {
            title: "价格",
            en: "price"
          },
        ],
        couponList: [],
        key: ''
      };
    },
    created() {
      const {
        key,
        cate_id
      } = this.$route.query || {}
      this.key = key
      this.getCouponList()
    },
    mounted() {
      // console.log('searchRef',this.$refs.Search);
      // this.$refs.Search.searchData = searchData
    },
    watch: {

    },
    computed: {
      ...mapState(["asItems", "isLoading","searchKey"]),
    },
    methods: {

      getCouponList(page=1) {
        this.$http.getCouponList({
          type: 'all',
          page:page,
        }).then(res => {
          if (res.status === 200) {
            this.couponList = res.data;
            console.log(this.couponList);
          } else {
            this.$Message.error(mess);
          }
        })
      },
      pageChange(page){
        console.log(page);
        this.getCouponList(page);
      },
      goDetail(item){
        if(item.have == 1){
          this.$Message.error(this.$t("已领取"));
          return;
        }
        this.$http.getcoupons({coupon_id:item.id,shop_id:item.shop_id}).then(res => {
          if (res.status === 200) {
            this.getCouponList();
          } else {
            this.$Message.error(mess);
          }
        })
      },

    },
    components: {
      Search,
      Empty
    },
    store,
  };
</script>

<style lang="scss" scoped>
  @import "@/common/style/common.scss";
  .container{
    width: 1200px;
    margin: 0 auto;
  }
  .banner {
    width: 100%;
    height: 100px;
    justify-content: center;
    // background-image: url('/static/img/banner-bg.jpg');
    // background-size: 100% 100%;
    // background-position: center;
    // background-repeat: no-repeat;
    &-title {
      font-weight: bold;
      font-size: 28px;
      margin: 0 10px;
    }

    img {
      width: 25px;
      height: 25px;
    }
  }

  .coupon-box {
    display: flex;
    flex-wrap: wrap;

    &-item {
      width: 380px;
      height: 160px;
      background-color: #fff;
      margin-right: 20px;
      margin-bottom: 20px;
      padding: 0px;
      transition: all 0.5s;
      box-shadow: 0 3px 20px -10px rgba(0,0,0,0.2);
      background-image: url('../../../static/img/coupon-bg.png');
      background-size: cover;
      justify-content: space-between;
    }
    &-item-check {
      width: 380px;
      height: 160px;
      background-color: #fff;
      margin-right: 20px;
      margin-bottom: 20px;
      padding: 0px;
      transition: all 0.5s;
      box-shadow: 0 3px 20px -10px rgba(0,0,0,0.2);
      background-image: url('../../../static/img/coupon-bg-check.png');
      background-size: cover;
      justify-content: space-between;
    }
  }

  .coupon-wrap {
  }

  .goods-thumb{
    width: 100px;
    margin-left: 15px;
    img{
      width: 100px;
      height: 100px;
    }
  }

  .coupon-info{
    width: 170px;
    .coupon-info-top{
      display:flex;
      flex-direction: row;
      .coupon-info-left{
        width:50px;
        // padding-top:20px;
        vertical-align: middle;
        margin-right:10px;
        span{
          width:50px;
          display:inline-block;
          font-size: 20px;
          color: #e2231a;
          font-weight: bold;
          padding-top: 4px;
          display: inline-block;
          white-space:nowrap; 
          overflow:hidden; 
        }
      }
      .coupon-info-right{
        width:110px;
        // padding-top:15px;
        vertical-align: middle;
        .coupon-info-title{
          white-space:nowrap; 
          overflow:hidden; 
          text-overflow:ellipsis;
        }
        .coupon-dec-price{
          color: #e2231a;
          font-size:14px;
          font-weight:bold;
          white-space: nowrap;
        }
      }
    }
    .coupon-info-bottom{
      color:#ccc;
    }
  }

  .coupon-btn{
    width: 52px;
    padding-right: 18px;
    padding-left: 18px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
  }

  .coupon-page{
    padding: 40px 0;
    text-align: center;
  }


  /* ---------------商品栏结束------------------- */
</style>
